<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;

    option = {
        backgroundColor: '#404a59',
        title: {
            text: '项目所在地分布图',
            subtext: 'data from azt365',
            x:'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return params.name + ' : ' + params.value[2];
            }
        },
        legend: {
            orient: 'vertical',
            y: 'bottom',
            x:'right',
            data:['azt365'],
            textStyle: {
                color: '#fff'
            }
        },
        visualMap: {
            min: 0,
            max: 200,
            calculable: true,
            inRange: {
                color: ['#50a3ba', '#eac736', '#d94e5d']
            },
            textStyle: {
                color: '#fff'
            }
        },
        geo: {
            map: 'china',
            label: {
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        series: [
            {
                name: 'test',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: {},
                symbolSize: function (val) {
                    var size = val[2];
                    if(size < 10){
                        return 10;
                    }else if(size < 50 ){
                        return 12;
                    }else if(size < 100 ){
                        return 14;
                    }else{
                        return 16;
                    }
                    //数值差别太大,不好控制大小
                    return 10;
                },
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    emphasis: {
                        borderColor: '#fff',
                        borderWidth: 1
                    }
                }
            },
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: {},
                symbolSize: function (val) {
                    var size = val[2];
                    if(size < 10){
                        return 10;
                    }else if(size < 50 ){
                        return 12;
                    }else if(size < 100 ){
                        return 14;
                    }else{
                        return 16;
                    }
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f4e925',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                zlevel: 1
            }
        ]
    };


    if (option && typeof option === "object") {
        $.getJSON('/echarts/project/grid.do', function (data) {
            if (data.success) {
                option.series[0].data=data.obj;
                var dobj = data.obj;
                var sorted =dobj.sort(function (a,b) {
                    return b.value[2] - a.value[2];
                });
                option.series[1].data=sorted.slice(0,3);
                option.visualMap.max=data.msg;
                myChart.setOption(option, true);
            } else {
                alert('提示', data.msg);
            }
        });

    }
</script>
</body>
</html>